<template>
  <a-config-provider :locale="zhCN">
    <div>
      <MInput
        v-model:value="value"
        placeholder="请输入内容"
        :allowClear="true"
        style="width: 300px"
      ></MInput>
      <MInputNumber
        v-model:value="numValue"
        placeholder="请输入内容"
        style="width: 300px"
      ></MInputNumber>
      <MTextarea
        v-model:value="value1"
        style="width: 300px"
        @pressEnter="pressEnter"
      ></MTextarea>
      <MSelect
        v-model:value="selectVal"
        :options="options"
        style="width: 300px"
        mode="multiple"
      ></MSelect>
      <MAutoComplete style="width: 300px" :options="options"></MAutoComplete>
      {{ value3 }}
      <MTreeSelect
        style="width: 300px"
        :treeData="mockTreeData"
        v-model:value="value3"
        multiple
        :renderIconNodes="UserOutlined"
        :field-names="{ label: 'name', value: 'id' }"
      >
        <template #title="scoped">
          <span>{{ scoped.label }}</span>
          <span>自定义{{ scoped.value }}</span>
        </template>
      </MTreeSelect>
      {{ switchValue }}
      <MSwitch style="width: 50px" v-model:value="switchValue"></MSwitch>
      <m-date-picker
        style="width: 300px"
        v-model:value="date"
        range
        format="YYYY-MM-DD"
        @change="onDateChange"
      >
        <template #dateRender="{ current }">
          <div class="custom-date">
            {{ current.date() }}
          </div>
        </template>

        <!-- <template #renderExtraFooter>
        <div>最多选择7天</div>
      </template> -->
      </m-date-picker>
      <MRadio
        v-model:value="radioValue"
        :options="[
          { label: 'Apple', value: '2' },
          { label: 'Pear', value: '1' },
        ]"
        @change="radioChange"
      ></MRadio>

      <MCascader
        style="width: 300px"
        v-model:value="cascaderVal"
        :options="cascaderList"
        :http="fatchData"
        :fieldNames="{ label: 'name', value: 'id' }"
        :keys="{ idx: 'id', breekName: 'name' }"
      >
        <template #displayRender="{ labels }">
          <span>{{ labels.join("/") }}</span>
        </template>
      </MCascader>

      {{ value4 }}
      <MTimePicker
        style="width: 300px"
        v-model:value="value4"
        isRange
      ></MTimePicker>

      <MCheckBox
        ref="mCheckRef"
        v-model:value="value5"
        :options="checkOptionbs"
      ></MCheckBox>
      <a-button type="primary" @click="mCheckRef?.checkAll">全选</a-button>
      <a-button type="primary" @click="mCheckRef?.clearAll">清除</a-button>

      <MRate v-model:value="value6"></MRate>

      <MSlider style="width: 300px" v-model:value="value7"></MSlider>

      {{ selectedKeys }} - {{ targetKeys }}
      <MTransfer
        v-model:selectedKeys="selectedKeys"
        v-model:targetKeys="targetKeys"
        :dataSource="mockData"
        :fieldNames="{ key: 'id', title: 'name' }"
      ></MTransfer>
    </div>
  </a-config-provider>
</template>

<script setup lang="ts">
import zhCN from "ant-design-vue/es/locale/zh_CN";

import { ref } from "vue";
import { UserOutlined, InfoCircleOutlined } from "@ant-design/icons-vue";
import { mockTreeData, cascardOptions } from "./config";

const value = ref("");
const numValue = ref();

const value1 = ref("");
const pressEnter = (e) => {
  console.log(e);
};

const options = ref(
  [...Array(25)].map((_, i) => ({
    value: (i + 10).toString(36) + (i + 1),
    label: (i + 10).toString(36) + (i + 1),
  }))
);
const selectVal = ref();

const value3 = ref(undefined);

const switchValue = ref(true);

const date = ref(["2025-01-01", "2025-01-07"]);
const onDateChange = (date) => {
  console.log(date);
};

const radioValue = ref("");
const radioChange = (e) => {
  console.log(e);
};

const cascaderVal = ref([]);
const cascaderList = ref<any>([...cascardOptions]);
const count = ref(1);
const fatchData = async () => {
  let list: any = [];

  for (let i = 0; i < 10; i++) {
    const value = count.value;
    list.push({
      id: `${Math.random() * 100}`,
      name: `${value}级目录${i}`,
      isLeaf: value >= 3,
    });
  }
  count.value++;
  return Promise.resolve(list);
};

// --------------------
const value4 = ref();

// --------------------
const value5 = ref([]);
const mCheckRef = ref();
const checkOptionbs = [
  { label: "Apple", value: "1" },
  { label: "Pear", value: "2" },
  { label: "Orange", value: "3" },
  { label: "Banana", value: "4" },
  { label: "Watermelon", value: "5" },
  { label: "Peach", value: "6" },
  { label: "Mango", value: "7" },
  { label: "Pineapple", value: "8" },
];

// --------------------
const value6 = ref(2);

// --------------------
const value7 = ref(0);

// --------------------
const mockData: any = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    id: i.toString(),
    name: `content${i + 1}`,
    description: `description of content${i + 1}`,
  });
}
const selectedKeys = ref([]);
const targetKeys = ref([]);
</script>

<style scoped></style>
